<!--
 * @author: lhy
-->

<script setup>
import {onMounted, ref} from "vue";
import {NavBar as vanNavBar,Icon as vanIcon} from "vant";
import useCinemaStore from "../store/cinemasStore.js";
import useCityStoreStore from "../store/cityStore.js";
import {useRouter} from "vue-router";

const selectType = ref(1)
const  store = useCinemaStore()
const  cityStore = useCityStoreStore()
const router = useRouter()
onMounted(()=>{
  if (store.cinemaList.length === 0){
    store.getCinemaList()
  }else {
    console.log("缓存")
  }
})

const handleChangeCity = ()=>{
  router.push("/city")
  store.cleanCinemaList()
}
</script>
<template>
  <div>
    <van-nav-bar title="影院">
      <template #left>
        <div @click="handleChangeCity">{{cityStore.cityName}}</div>
      </template>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

    <select v-model="selectType">
      <option :value="1">app订票</option>
      <option :value="0">前台兑换</option>
    </select>
    <ul>
      <li v-for="item in store.filterCinemaList(selectType)" :key="item.cinemaId">
        {{item.name}}
      </li>
    </ul>
  </div>
</template>

<style lang="scss">
ul{
  li{
    padding: 10px;
  }
}
</style>